<template>
  <div class="search">
    <!-- <a-input-search v-model:value="state.params" :placeholder="pl" allow-clear @search="onSearch">
    </a-input-search> -->

    <a-input-group compact>
      <a-select style="width: 26%" v-model:value="state.selectValue" @change="onChange">
        <a-select-option v-for="item in searchOptions" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
      <a-input-search allow-clear style="width: 74%" v-model:value="state.inputValue" :placeholder="pl"
        @search="onSearch" />
    </a-input-group>
  </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive } from 'vue';

const emit = defineEmits(['onSearch', 'change']);
const props = defineProps({
  searchOptions: {
    type: Array,
    default: () => [],
  },
  pl: {
    type: String,
    default: '请输入内容',
  },
});

const state = reactive({
  params: '',
  inputValue: '',
  selectValue: '',
});

const onSearch = () => {
  emit('onSearch', { selectValue: state.selectValue, inputValue: state.inputValue });
}
const onChange = () => {
  emit('change');
}
onMounted(() => {
  state.selectValue = props?.searchOptions[0].value;
})
</script>
<style scoped lang='less'>
.search {
  margin-bottom: 12px;
  // :deep(.ant-input-affix-wrapper:hover) {
  //   border-color: transparent !important;
  // }

  // :deep(.ant-input-group .ant-input-affix-wrapper:not(:last-child)) {
  //   border-radius: 0 !important;
  // }
  :deep(.ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child)) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

}
</style>